<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Sliding Dan Rolling Menu Dangan JQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Sliding Dan Rolling Menu Dangan JQuery" />
        <meta name="keywords" content="filiex, jquery, css3, rolling, rounded, menu, navigation"/>
        <link rel="stylesheet" href="/sliding%20dan%20rolling.css" type="text/css" media="screen"/>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7243260-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

        <style>
            *{
                margin:0;
                padding:0;
                background: #222 url(http://4.bp.blogspot.com/-RssnI67RoHQ/T00zbJloWhI/AAAAAAAAEHk/O6BbO_iVfQM/s400/carbon%2Bof%2Bcorby.png) repeat top left;
            }
            .title{
                width:703px;
                height:144px;
                position:absolute;
                top:0px;
                left:0px;
                background:transparent url(http://1.bp.blogspot.com/-bQ0J-8XDh3s/T-TnrspuAQI/AAAAAAAADS0/EshxeUkzGF4/s1600/titleku.gif) no-repeat top left;
            }
            a.back{
                background:transparent url(http://3.bp.blogspot.com/-pFuoo3tDXyI/T-TnqX6z8KI/AAAAAAAADSs/QpSRb0pvuDg/s1600/backku.gif) no-repeat top left;
                position:fixed;
                width:300px;
                height:50px;
                outline:none;
                bottom:0px;
                left:0px;
            }
          .menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}
.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(http://2.bp.blogspot.com/-3QpF0KnEA2o/T01IgQTN-JI/AAAAAAAAEJ8/g9BrjRgJ0qc/s400/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(http://3.bp.blogspot.com/-femulo5yidk/T01IqPOvXxI/AAAAAAAAEKM/lShtOrhlWN4/s400/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(http://2.bp.blogspot.com/-dAoPb0wnI6k/T01IgEzW2TI/AAAAAAAAEJ0/dW39b-XwcQA/s400/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(http://2.bp.blogspot.com/-8pdLn9-uWUg/T01Ifz5HC5I/AAAAAAAAEJo/kTjcW306FTg/s400/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(http://4.bp.blogspot.com/-WBAm3QWIHwI/T01IqEP4yRI/AAAAAAAAEKU/YRSiGy8Tabw/s400/photos.png) no-repeat top left;
}
.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}
        </style>
    </head>
    <body>
        <div>
            <a class="back" href="http://otowebsite.blogspot.com/2012/06/menu-rocking-rolling.html"></a>
            <div class="title"></div>
        </div>
        <div class="menu">

            <div class="item">
                <a class="link icon_mail"></a>
                <div class="item_content">
                    <h2>Contact us</h2>
                    <p>
                        <a href="mailto:wanti.arifin@gmail.com">eMail</a>
                        <a href="http://www.twitter.com/otowebsite/">Twitter</a>

                        <a href="http://www.facebook.com/dekrif">Facebook</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <a class="link icon_help"></a>
                <div class="item_content">
                    <h2>Help</h2>

                    <p>
                        <a href="#">FAQ</a>
                        <a href="#">Live Support</a>
                        <a href="#">Tickets</a>
                    </p>
                </div>
            </div>

            <div class="item">
                <a class="link icon_find"></a>
                <div class="item_content">
                    <h2>Search</h2>
                    <p>
                        <input type="text"></input>
                        <a href="">Go</a>
                    </p>

                </div>
            </div>
            <div class="item">
                <a class="link icon_photos"></a>
                <div class="item_content">
                    <h2>Image Gallery</h2>
                    <p>
                        <a href="#">Categories</a>

                        <a href="#">Archives</a>
                        <a href="#">Featured</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <a class="link icon_home"></a>
                <div class="item_content">

                    <h2>Start from here</h2>
                    <p>
                        <a href="http://www.otowebsite.blogspot.com/">Services</a>
                        <a href="http://www.otowebsite.blogspot.com/">Portfolio</a>
                        <a href="http://www.otowebsite.blogspot.com/">Pricing</a>
                    </p>
                </div>

            </div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script src="http://filiex.googlecode.com/files/jquery-css-transform.js" type="text/javascript"></script>
        <script src="http://filiex.googlecode.com/files/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
        <script>
            $('.item').hover(
                function(){
                    var $this = $(this);
                    expand($this);
                },
                function(){
                    var $this = $(this);
                    collapse($this);
                }
            );
            function expand($elem){
                var angle = 0;
                var t = setInterval(function () {
                    if(angle == 1440){
                        clearInterval(t);
                        return;
                    }
                    angle += 40;
                    $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
                },10);
                $elem.stop().animate({width:'268px'}, 1000)
                .find('.item_content').fadeIn(400,function(){
                    $(this).find('p').stop(true,true).fadeIn(600);
                });
            }
            function collapse($elem){
                var angle = 1440;
                var t = setInterval(function () {
                    if(angle == 0){
                        clearInterval(t);
                        return;
                    }
                    angle -= 40;
                    $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
                },10);
                $elem.stop().animate({width:'52px'}, 1000)
                .find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
            }
        </script>
    </body>
</html>?